<template lang="html">
   <div id="temp">
       <div id="desc">
           <div class="title">
               <h4>{{info.title}}</h4>
               <p>{{info.add_time | datefmt('YYYY-MM-DD')}}</p>
               <hr>
               <div class="mui-content">
                   <ul class="mui-table-view mui-grid-view mui-grid-9">
                       <li  v-for="(item, index) in list" class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
                           <img class="preview-img"  :src="item.src" height="100" @click="$preview.open(index, list)">
                          </li>
                   </ul>
               </div>
               <p v-html="info.content"></p>
           </div>
       </div>

       <div id="comment">
           <comment :id="id"></comment>
       </div>
   </div>
</template>
<script type="text/ecmascript-6">
    import common from "../../kits/common.js";
    import comment from '../subcom/comment.vue';
    import {Toast} from 'mint-ui';
    export default{
        components:{
            comment
        },
        data(){
            return {
                id:0,
                info:{},
                list:[
//                    {
//                        src: 'https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=4152033690,2710874684&fm=173&s=EC82F21D9668CF4F448BEFCA030070AE&w=218&h=146&img.JPEG',
//                        w: 600,
//                        h: 400
//                    },
//                    {
//                        src: 'https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=179830440,1581589447&fm=173&s=BF09C001422338AE8CC1D9040300A0C1&w=218&h=146&img.JPG',
//                        w: 600,
//                        h: 400
//                    },
//                    {
//                        src: 'https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=179830440,1581589447&fm=173&s=BF09C001422338AE8CC1D9040300A0C1&w=218&h=146&img.JPG',
//                        w: 600,
//                        h: 400
//                    },
                ]
            }
        },
        created(){
            this.id = this.$route.params.id;
//            console.log( this.$route.params.id)
            this.getinfo();
            this.getimgs();
        },
        methods:{
            getimgs(){
                var url = 'http://182.254.146.100:8899/api/getthumimages/'+this.id;
                this.$http.get(url).then(function(res){
                    res.body.message.forEach(function(item){

                        var img = document.createElement("img");
                        item.src = img.src;
                        item.h = img.height;
                        item.w = img.width;
                    })
                    this.list = res.body.message;
                })
            },
            getinfo(){
                var url = common.apidomain + '/api/getimageInfo/'+this.id;
                this.$http.get(url).then(function(res){
                    console.log(res)
                    if(res.body.status!=0){
                        Toast(res.body.message);
                        return ;
                    }
                    this.info = res.body.message[0]
                })
            }
        }

    
    }
</script>
<style scoped>
    .mui-content > .mui-table-view:first-child{
        background-color: #fff;
        border-top: 0;
        border-left: 0;
    }
    .mui-grid-view.mui-grid-9 .mui-table-view-cell{
        border-right: 0;
        border-bottom: 0;
    }
</style>